<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="jquery.js"></script>
<div id="d1"></div>
<div id="d2"></div>
<button id="d3" style="display: none" value="播放">暂停</button>
<script>
    var music=new Audio();
    $.get("https://www.mxnzp.com/api/music/recommend/list",{},
        function (data) {
        var ds=data.data;
        for(let i=0;i<ds.length;i++){
            let d=ds[i];

            var pic=document.createElement("img");
            pic.src=d.pic_small;
            pic.onclick=function () {
                $.get("https://www.mxnzp.com/api/music/song/detail?songId="+d.song_id,{},
                function (songDate) {
                    music.src=songDate.data.songLink;
                    music.play();
                    d2.innerHTML="正在播放<b>"+d.title+"</b>";
                    d3.style.display="block";
                    d3.onclick=function () {
                        if(d3.value=="播放"){
                            music.play();
                            d3.value="暂停";
                            d3.innerHTML="暂停";
                        }else{
                            music.pause();
                            d3.value="播放";
                            d3.innerHTML="播放";

                        }
                    }
                })
            };
            d1.appendChild(pic);
        }
    })
</script>
</body>
</html>